
<!--
Company: Aspire Technology
Author : Kanzariya Dipesh
         Hiral Myatra
Author URL: http://www.aspiretechnology.in
-->
<!DOCTYPE HTML>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>check results</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/style_1.css" rel="stylesheet" type="text/css" media="all" />
        <link href="jAlerts.css" rel="stylesheet" type="text/css">
        <link href="css/dialog.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css">

        <!--<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />-->        
        <link href="css/jquery.nouislider.css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery.min.js"></script>        
        <script src="js/jquery.nouislider.js"></script>
        <script type="text/javascript" src="js/jAlerts.js"></script>        
        <script type="text/javascript" src="js/jAlerts.min.js"></script>        
        <script type="text/javascript" src="js/popup.js"></script>                
        <!--<script type="text/javascript" src="js/no-conflit.js"></script>-->                

        <link href="css/jquery-ui.css" rel="stylesheet">        
        <!--<script src="http://code.jquery.com/jquery-1.10.2.js"></script>-->
        <script src="js/jquery-ui.js"></script>

    </head>
    <body>
        <div class="wrap">
            <div class="main_bg">            
                <div class="container">
                    <center><h1>Who is your best friend ?</h1></center>
                    <div class="quick">
                        <div class="wrap">
                            <center><h3 class="style">Select Age <span id="slider_value1">20 to 30</span></h3></center>
                            <div id="xtra"><div id="slider" onchange="change()"></div></div>
                            <script>
                                var x1 = 20, x2 = 30;
                                $("#slider").noUiSlider({
                                    start: [20, 30],
                                    connect: true,
                                    step: 1,
                                    range: {
                                        'min': 10,
                                        'max': 60
                                    },
                                    slide: function(event, ui) {
                                        $("#amount").val(ui.value);
                                    },
                                    change: function(event, ui) {
                                        $("#amount").val(ui.value);
                                    }
                                });
                                function change() {
                                    setInterval($('#d').trigger('click'), 30);
                                }
                            </script>	
                            <h4 class="left style">10 years</h4>	
                            <h4 class="right style">60 years</h4>	
                            <div class="clearfix"></div>
                        </div> 
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="wrap">
                    <center>
                        <div class="form-elements">
                            <!--<li>-->
                            <div class="radio"> <label><input type="radio" name="gender" checked="" value="male"><i></i>Male</label> </div>                
                            <div class="radio"> <label><input type="radio" name="gender" value="female"><i></i>Female</label> </div>         
                            <!--<div class="radio"> <label><input type="radio" name="radio" checked=""><i></i>All</label> </div>-->
                            <br><br><br><br><input type="button" value="click" id="d"><input type="button" value="check" id="check_result" class="btn-success"> 
                            <!--<div id="bottom"><input type="button" value="Slide in from the bottom"></div>-->

                            <script>
                                var result_name1 = [], result_match1 = [], result_id1 = [];
                                $('#d').hide();
                                $('#bottom').hide();
                                $('#d').on('click', function() {
                                    var x = $("#slider").val().toString();
                                    x1 = x.substring(0, 2);
                                    x2 = x.substring(6, 8);
                                    $("#slider_value1").html(x1 + " to " + x2);
                                });
                                $('#check_result').click(function() {
                                    var gender = $("input[name='gender']:checked").val();
//                                    alert(gender + " " + x1 + " " + x2)
                                    $.ajax({
                                        url: "MatchAction.do",
                                        data: "x1=" + x1 + "&x2=" + x2 + "&gender=" + gender,
                                        dataType: 'json',
                                        type: "post",
                                        success: function(data, textStatus, jqXHR) {
//                                            alert("Success " + JSON.stringify(data));
//                                            console.log(data);
                                            //data = JSON.parse(data);
//                                            $("#match_result").html("hello"); 

                                            var t_head = "", r_id = "", r_name = "", r_match = "";
//                                            $("#r_photo").html(r_id);
//                                            $("#r_name").html(r_name);
//                                            $("#r_match").html(r_match);
                                            result_name1.length=0;
                                            result_id1.length=0;
                                            result_match1.length=0;

                                            $(data).each(function(index, t) {
                                                result_name1.push(t.name);
                                                result_match1.push(t.match);
                                                result_id1.push(t.id);
//                                                alert(result_name);<a href="http://www.facebook.com/"></a>
                                            });
//                                            $("#src_result").html(html);
                                            $(result_id1).each(function(index, t) {

                                                if (index === 0) {
                                                    t_head += "<th>First match</th>";
                                                }
                                                if (index === 1) {
                                                    t_head += "<th>Second match</th>";
                                                }
                                                if (index === 2) {
                                                    t_head += "<th>Third match</th>";
                                                }
//                                                t_head+="<th>"+(index+1)+" match</th>";
                                                r_id += "<td><a href=\"http://www.facebook.com/" + t + "\"><img src=http://graph.facebook.com/" + t + "/picture?height=200&width=200></a></td>"
                                            });
                                            $(result_name1).each(function(index, t) {
                                                r_name += "<td>" + t + "</td>"
                                            });
                                            $(result_match1).each(function(index, t) {
                                                r_match += "<td>" + t + "</td>"
                                            });

                                            $("#t_head").html(t_head);
                                            $("#r_photo").html(r_id);
                                            $("#r_name").html(r_name);
                                            $("#r_match").html(r_match);
//                                            alert(html);
//                                            $("#match_result").html(html);
//                                            $("#bottom").click();
                                            $("#opener-3").click();
                                        }
                                    });
                                });
                            </script></center>
                </div>
            </div>
            <!--            <table class="table table-striped table-hover ">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Matches</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Column content</td>
                                    <td>Column content</td>      
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>    
                            </tbody>
                        </table> -->
        </div>		
    </div>    
    <script>
        $(function() {
            $("#dialog-3").dialog({
                autoOpen: false,
                hide: "puff",
                show: "slide",
                height: 350,
                width: 650
            });
            $("#opener-3").click(function() {
                $("#dialog-3").dialog("open");
//               $("link[rel=stylesheet]").attr({href : "css/jquery-ui.css"});
                $("script").attr({src: "js/jquery-ui.js"});
            });
        });
    </script>
<center><div id="dialog">
        <div id="dialog-3" title="Dialog Title goes here...">
            <div id="result">
                <table>
                    <thead id="t_head">
                        <!--                <th>First Match</th>
                                        <th>Second Match</th>-->
                        <!--<th>Third Photo</th>-->
                    </thead>
                    <tbody id="src_result">
                        <tr id="r_photo"></tr>
                        <tr id="r_name" style="color: #e78f08;text-align: center;font-weight: bolder;"></tr>
                        <tr id="r_match" style="text-align: center;font-weight: bolder;"></tr>
                    </tbody>
                </table>

                <!--                      color: #e78f08;
                  text-align: center;
                  font-weight: bolder;
                }-->
            </div> </div>
        <button id="opener-3" hidden="true">Open Dialog</button>
    </div></center>

</body>
</html>